<template>
  <div >

      <van-row>
        <van-row  class="search-top" type="flex" align="bottom" >
          <van-col span="5" offset="2">
           <van-image round width="60" height="60" src="http://www.answerh.top/group1/M00/00/00/rBgDL17VDjGAECZSAAWKfYhU2Ng854.jpg" />
        </van-col>
          <van-col span="3" >

            <div class="cart-text">{{username==""?"George":username}}</div>
          </van-col>
        </van-row>

          <van-row type="flex" justify="space-around" class="grid" align="center">
            <van-col span="6" offset="1" align="center" >
              <van-col span="15" >1</van-col>
              <van-col span="15" class="col-text-low">商品收藏</van-col>
            </van-col>
            <van-col span="6" offset="1" align="center" >
              <van-col span="15" >29</van-col>
              <van-col span="15" class="col-text-low">店铺关注</van-col>
            </van-col>
            <van-col span="6" offset="1" align="center" >
              <van-col span="15" >3</van-col>
              <van-col span="15" class="col-text-low">喜欢内容</van-col>
            </van-col>
            <van-col span="6" offset="1" align="center" >
              <van-col span="15" >109</van-col>
              <van-col span="15" class="col-text-low">浏览记录</van-col>
            </van-col>
          </van-row>
      </van-row>

    <van-grid :border="false" :column-num="5" clickable>
      <van-grid-item icon="credit-pay" text="待付款" dot/>
      <van-grid-item icon="logistics" text="待收货" badge="1"/>
      <van-grid-item icon="comment-o" text="待评价"/>
      <van-grid-item icon="cash-on-deliver" text="退换/售后"/>
      <van-grid-item  icon="orders-o" text="全部订单" @click="test"/>
    </van-grid>

    <van-row type="flex" justify="space-around" class="grid" align="center">
      <van-col span="4" offset="1" align="center" >
        <van-col span="15" class="col-text-up">2张</van-col>
        <van-col span="15" class="col-text-low">优惠券</van-col>
      </van-col>

      <van-col span="4" offset="1" align="center" >
        <van-col span="15" class="col-text-up">314个</van-col>
        <van-col span="15" class="col-text-low">豆豆</van-col>
      </van-col>
      <van-col span="4" offset="1" align="center" >
        <van-col span="15" class="col-text-up">0.8元</van-col>
        <van-col span="15" class="col-text-low">红包</van-col>
      </van-col>
      <van-col span="4" offset="1" align="center" >
        <van-col span="15" >
          <van-icon name="pending-payment" class="col-text-up" size="18px"/>
        </van-col>
        <van-col span="15" class="col-text-low">资产</van-col>
      </van-col>
    </van-row>

    <van-cell-group title=" " center >
      <van-cell title="账户与安全" value="账户保障可提升" is-link/>
      <van-cell title="设置字体大小"  is-link/>
      <van-cell title="支付设置"  is-link/>
      <van-cell title="通用" value="清除本地缓存等"  is-link/>
    </van-cell-group>

    <!--<van-button round class="out" >退出登入</van-button>-->
    <!--<van-col span="8"  class="out">退出登入</van-col>-->
    <div class="out">退出登入</div>


  </div>

</template>

<script>
    import state from "../store/state";

    export default {
        name: "MyHome",
        data(){
          return{
            username:'George',
            active: 0
          }
        },
      mounted: function () {
          this.username=state.username;
      },
      methods: {
        test(){
          this.$http({
            method: 'get',
            url: '/test',

          }).then(resp => {
            console.log(resp);
          });
        }
      }
    }
</script>

<style scoped>
  .cart-text {
    color: skyblue;
    font-size: 1em;
    line-height: 40px;
    font-weight: bold;
    width: 80px;
  }
  .search-top{
    width: 100%;
    height: 75px;
    background: ghostwhite;
  }
  .grid{
    background: ghostwhite;
    width: 100%;
    height: 65px;
  }
  .col-text-up {
    color: indianred;
    font-size: 0.8em;
    line-height: 30px;
    font-weight: bold;

  }
  .col-text-low{
    font-size: 0.7em;
  }
  .out{
    text-align: center;
    width: 100%;
    height: 30px;
    margin-top: 15px;
    background: ghostwhite;
    padding-top: 10px;
    vertical-align:middle
  }

</style>
